<template>
    <el-form class="login-form" :rules="loginRules" label-position="left" ref="loginForm" :model="loginForm">
        <!--<el-form-item v-if="tenantMode" prop="tenantId">-->
        <!--<el-input-->
        <!--@keyup.enter="handleLogin"-->
        <!--v-model="loginForm.tenantId"-->
        <!--auto-complete="off"-->
        <!--:placeholder="$t('login.tenantId')"-->
        <!--&gt;-->
        <!--<template #prefix>-->
        <!--<i class="icon-quanxian" />-->
        <!--</template>-->
        <!--</el-input>-->
        <!--</el-form-item>-->


        <div class="title">Hello !</div>
        <div class="title-tips" style="display: flex; justify-content:center;">
            <!--{{ '欢迎' + $t('login.title') }}{{ website.title }}-->
            <div  style="padding: 3px 5px 0 0;">
            <img src="/favicon.png" width="28" height="30"  />
            </div>
            {{ website.title }}

        </div>
        <el-form-item prop="username">
            <el-input @keyup.enter="handleLogin" v-model="loginForm.username" :placeholder="$t('login.username')"   ref="usernameInput">
                <template #prefix>
                    <i class="icon-yonghu" />
                </template>
            </el-input>
        </el-form-item>
        <el-form-item prop="password">
            <el-input @keyup.enter="handleLogin" :type="passwordType" v-model="loginForm.password"
                :placeholder="$t('login.password')">
                <template #suffix>
                    <i class="el-icon-view el-input__icon" @click="showPassword" />
                </template>
                <template #prefix>
                    <i class="icon-mima" />
                </template>
            </el-input>
        </el-form-item>
        <el-form-item v-if="this.website.captchaMode" prop="code">
            <!-- <el-row :span="24" style="width: 100%;">
                <el-col :span="16">
                    <el-input
                        size="large"
                        @keyup.enter="handleLogin"
                        v-model.trim="loginForm.code"
                        auto-complete="off"
                        :placeholder="$t('login.code')"
                        tabindex="3"
                    >
                        <template #prefix>
                            <i class="icon-yanzhengma" style="transform: translateY(-2px);"/>
                        </template>
                    </el-input>
                </el-col>
                <el-col :span="8">
                    <div class="login-code">
                        <img :src="loginForm.image" class="code" @click="refreshCode"/>
                    </div>
                </el-col>
                 xl: 4,
      lg: 6,
      md: 8,
      xs: 24,
            </el-row> -->
            <!-- <el-row :span="24" style="width: 100%;">
                <el-col :xs="16" >
                    <el-input v-model.trim="loginForm.code" :placeholder="$t('login.code')" type="text" style="width: 67%;">
                        <template #prefix>
                            <i class="icon-yanzhengma" />
                        </template>
                    </el-input>
                </el-col>
                <el-col :xs="8" >
                    <el-image class="code" :src="loginForm.image" @click="refreshCode"  />
                </el-col>
            </el-row> -->
            <el-input v-model.trim="loginForm.code" :placeholder="$t('login.code')" type="text" style="width: 67%;"   @keyup.enter="handleLogin">
                <template #prefix>
                    <i class="icon-yanzhengma" />
                </template>
            </el-input>
            <el-image class="code" :src="loginForm.image" @click="refreshCode" />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" class="login-btn" @click.prevent="handleLogin">{{ $t('login.submit') }}
            </el-button>
        </el-form-item>
        <el-dialog title="用户信息选择" append-to-body v-model="userBox" width="350px">
            <avue-form :option="userOption" v-model="userForm" @submit="submitLogin" />
        </el-dialog>
    </el-form>
</template>

<script>
import { mapGetters } from 'vuex';
import { info } from '@/api/system/tenant';
import { getCaptcha } from '@/api/user';
import { getTopUrl } from '@/utils/util';
import { setStore, getStore } from '@/utils/store';
import { isStrongPwd } from '@/utils/validate';
import website from '@/config/website';
export default {
    name: 'userlogin',
    data() {
        return {
            website: website,
            tenantMode: this.website.tenantMode,
            screenWidth: '',
            loginForm: {
                //租户ID
                tenantId: '000000',
                //部门ID
                deptId: '',
                //角色ID
                roleId: '',
                //用户名
                username: '',
                //密码
                password: '',
                //账号类型
                type: 'account',
                //验证码的值
                code: '',
                //验证码的索引
                key: '',
                //预加载白色背景
                image: '',
            },
            loginRules: {
                tenantId: [{ required: false, message: '请输入租户ID', trigger: 'blur' }],
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 1, message: '密码长度最少为6位', trigger: 'blur' },
                ],
            },
            passwordType: 'password',
            userBox: false,
            userForm: {
                deptId: '',
                roleId: '',
            },
            userOption: {
                labelWidth: 70,
                submitBtn: true,
                emptyBtn: false,
                submitText: '登录',
                column: [
                    {
                        label: '部门',
                        prop: 'deptId',
                        type: 'select',
                        props: {
                            label: 'deptName',
                            value: 'id',
                        },
                        dicUrl: '/blade-system/dept/select',
                        span: 24,
                        display: false,
                        rules: [
                            {
                                required: true,
                                message: '请选择部门',
                                trigger: 'blur',
                            },
                        ],
                    },
                    {
                        label: '角色',
                        prop: 'roleId',
                        type: 'select',
                        props: {
                            label: 'roleName',
                            value: 'id',
                        },
                        dicUrl: '/blade-system/role/select',
                        span: 24,
                        display: false,
                        rules: [
                            {
                                required: true,
                                message: '请选择角色',
                                trigger: 'blur',
                            },
                        ],
                    },
                ],
            },
        };
    },
    created() {
        this.getTenant();
        this.refreshCode();
    },
    mounted() {

        window.onresize = () => {
            return (() => {
                this.screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth

                var img = document.querySelector('img')
                if (this.screenWidth < 544) {
                    img.style.width = '90px'
                } else if (this.screenWidth >= 988 && this.screenWidth <= 1669) {
                    img.style.width = '100px'
                } else {
                    img.style.width = '100%'
                }

            })()
        }
        this.$refs.usernameInput.focus()
    },
    computed: {
        ...mapGetters(["website"])
    },
    watch: {
        'loginForm.deptId'() {
            const column = this.findObject(this.userOption.column, 'deptId');
            if (this.loginForm.deptId.includes(',')) {
                column.dicUrl = `/blade-system/dept/select?deptId=${this.loginForm.deptId}`;
                column.display = true;
            } else {
                column.dicUrl = '';
            }
        },
        'loginForm.roleId'() {
            const column = this.findObject(this.userOption.column, 'roleId');
            if (this.loginForm.roleId.includes(',')) {
                column.dicUrl = `/blade-system/role/select?roleId=${this.loginForm.roleId}`;
                column.display = true;
            } else {
                column.dicUrl = '';
            }
        },
    },
    computed: {
        ...mapGetters(['tagWel', 'userInfo','themeName']),
    },
    props: [],
    methods: {
        refreshCode() {
            if (this.website.captchaMode) {
                getCaptcha().then(res => {
                    const data = res.data;
                    this.loginForm.key = data.key;
                    this.loginForm.image = data.image;

                    this.screenWidth = document.documentElement.clientWidth
                    var img = document.querySelector('img')

                    if (this.screenWidth < 544) {
                        img.style.width = '90px'
                    } else if (this.screenWidth >= 988 && this.screenWidth <= 1669) {
                        img.style.width = '100px'
                    } else {
                        img.style.width = '100%'
                    }
                });
            }
        },
        showPassword() {
            this.passwordType === '' ? (this.passwordType = 'password') : (this.passwordType = '');
        },
        submitLogin(form, done) {
            if (form.deptId !== '') {
                this.loginForm.deptId = form.deptId;
            }
            if (form.roleId !== '') {
                this.loginForm.roleId = form.roleId;
            }
            this.handleLogin();
            done();
        },
        handleLogin() {
            console.log(555555555)
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    const loading = this.$loading({
                        lock: true,
                        text: '登录中,请稍后',
                        background: 'rgba(0, 0, 0, 0.7)',
                    });
                    this.$store
                        .dispatch('LoginByUsername', this.loginForm)
                        .then(() => {
                            // 校验是否是强密码
                            if (this.website.checkStrongPassword) {
                                setStore({ name: "StrongPassword", content: isStrongPwd(this.loginForm.password) })
                            }
                            console.log('111111',this.themeName);
                           // this.$store.commit('SET_THEME_NAME', this.themeName);

                            // return
                            if (this.website.switchMode) {
                                const deptId = this.userInfo.dept_id;
                                const roleId = this.userInfo.role_id;
                                if (deptId.includes(',') || roleId.includes(',')) {
                                    this.loginForm.deptId = deptId;
                                    this.loginForm.roleId = roleId;
                                    this.userBox = true;
                                    this.$store.dispatch('LogOut').then(() => {
                                        loading.close();
                                    });
                                    return false;

                                }
                            }
                            loading.close();
                            this.$router.push(this.tagWel);
                        })
                        .catch(err => {
                            console.log(err);
                            loading.close();
                            this.refreshCode();
                        });
                }
            });
        },
        getTenant() {
            let domain = getTopUrl();
            // 临时指定域名，方便测试
            //domain = "https://bladex.vip";
            info(domain).then(res => {
                const data = res.data;
                if (data.success && data.data.tenantId) {
                    this.tenantMode = false;
                    this.loginForm.tenantId = data.data.tenantId;
                    this.$parent.$refs.login.style.backgroundImage = `url(${data.data.backgroundUrl})`;
                }
            });
        },
    },
};
</script>

<style lang="scss" scoped>
::deep --el-input-bg-color {
    background: white !important;
}

.login-form {
  border-radius: 10px;
    position: relative;
    max-width: 100%;
    padding: 1vh 0vw;
    margin: calc((100vh - 1000px) / 2) 1vw 2vw;
    overflow: hidden;
    //background: url('https://imgcs.s98s2.com/common/1690428279175690.png');
  background-color: #2B2CAA;
    background-size: 100% 100%;
  margin-top: 1vw;
    .title {
        font-size: 54px;
        font-weight: 500;
        color: var(--el-color-white);
    }

    .title-tips {
        margin-top: 29px;
        font-size: 26px;
        font-weight: 400;
        color: var(--el-color-white);
    }

    .login-btn {
        display: inherit;
        width: 97%;

        height: 50px;
        margin-top: 5px;
        margin-left: 10px;
        background: var(--el-color-primary);
        border: 0;

        &:hover {
            opacity: 0.9;
        }
    }

    .tips {
        margin-bottom: 10px;
        font-size: 12px;
        color: var(--el-color-white);

        span {
            &:first-of-type {
                margin-right: 16px;
            }
        }
    }

    .title-container {
        position: relative;

        .title {
            margin: 0 auto 40px;
            font-size: 34px;
            font-weight: bold;
            color: var(--el-color-primary);
            text-align: center;
        }
    }

    i {
        position: absolute;
        top: 8px;
        left: 15px;
        font-size: 16px;
    }

    .show-password {
        float: right;
        width: 32px;
        height: 32px;
        font-size: 16px;
    }

    :deep() {
        .el-form-item {
            padding-right: 0;
            margin: 20px 0;
            color: #454545;
            background: transparent;
            border: 1px solid transparent;
            border-radius: 2px;

            &__content {
                min-height: 32px;
                line-height: 32px;
            }

            &__error {
                position: absolute;
                top: 100%;
                left: 18px;
                font-size: 12px;
                line-height: 18px;
                color: var(--el-color-error);
            }
        }

        .el-input {
            box-sizing: border-box;

            input {
                height: 48px;
                padding-left: 40px;
                line-height: 48px;
                border: 0;
                background: white;
            }

            &__suffix-inner {
                position: absolute;
                right: 65px;
                cursor: pointer;
            }
        }

        .code {
            position: absolute;
            top: 4px;
            right: 4px;
            cursor: pointer;
            border-radius: 10px;
        }
    }
}
</style>
